<template>
  <basic-container>
    <avue-crud
        v-if="tableOption"
        v-bind="bindVal"
        v-on="onEvent"
        v-model:page="page"
        v-model="startForm">
      <template #menu="{type,size,row}" slot="menu">
        <el-button icon="el-icon-check" text v-if="getBtnPermission('delRoleDataRuleBtn',row,null,false)"
                   @click="handlerPermission(row)" :size="size" :type="type">权限
        </el-button>
        <el-button icon="el-icon-avatar"
                   text
                   :size="size"
                   :type="type"
                   @click="$refs.roleUserDialog.show(row)">用户
        </el-button>
      </template>
    </avue-crud>
    <editor-permission-dialog ref="editorPermissionDialog"></editor-permission-dialog>
    <role-user-dialog ref="roleUserDialog"></role-user-dialog>
  </basic-container>
</template>

<script>

import {createStaticMixin} from "@/mixins/startCrud.js"
import EditorPermissionDialog from "./EditorPermissionDialog.vue"
import RoleUserDialog from "@/views/sys/role/roleUserIDialog.vue";
import roleOption from "@/option/sys/roleOption";
import * as roleApi from "@/api/sys/roleApi";

const option = {}
option.option = roleOption
option.api = roleApi
option.isTreeData = true

export default {
  mixins: [createStaticMixin(option)],
  components: {
    RoleUserDialog,
    EditorPermissionDialog
  },
  methods: {
    loadCrudColumnBefore(col) {
      // console.log(col);
    },
    handlerPermission(row) {
      this.$refs.editorPermissionDialog.show(row)
    },
  }
}
</script>

<style scoped>

</style>
